<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="../js/antd/antd.css"/>
    <script src="../js/vuejs/vue.min.js"></script>
    <script src="../js/vuejs/axios.min.js"></script>
    <script src="../js/antd/antd.min.js"></script>
    <script src="../js/common.js"></script>
</head>
<style>
    body {
        background-color: #f0f2f5;
    }

    .ant-table-placeholder {
        background: #f5f6f7 !important;
    }

    .ant-table-thead > tr > th {
        background: #e3e9f1 !important;
    }

    .link_a {
        color: rgba(0, 0, 0, 0.65);;
    }

    .link_a:hover {
        color: #1890ff;
    }

    .ant-modal-mask {
        background-color: #f3f5f9;
        opacity: 0.5;
    }
</style>
<body>
<div id="mainDiv">
    <a-spin :spinning="loading">
        <a-button @click="toAddConn" type="primary" icon="plus-circle">新增数据库</a-button>
        <div style="margin-top: 15px">
            <a-table :columns="columns" :data-source="dataList">
                <template slot="operation" slot-scope="text, record, index">
                    <div class="editable-row-operations">
                        <a @click="toEdit(record)">编 辑</a>
                        <a @click="del(record.id)" style="color: red;margin-left: 20px;">删 除</a>
                    </div>
                </template>
            </a-table>
        </div>
        <a-modal v-model="showEditDialog" :title="modalTitle" @ok="saveConn">
            <a-form-model
                    ref="ruleForm"
                    :model="form"
                    :rules="rules"
                    :label-col="labelCol"
                    :wrapper-col="wrapperCol"
            >
                <a-form-model-item label="数据库" prop="dbType">
                    <a-select v-model="form.dbType" @change="changeDbType">
                        <a-select-option value="mysql">
                            MySQL
                        </a-select-option>
                        <a-select-option value="oracle">
                            Oracle
                        </a-select-option>
                        <a-select-option value="postgresql">
                            PostgreSQL
                        </a-select-option>
                        <a-select-option value="dm">
                            达梦数据库
                        </a-select-option>
                    </a-select>
                </a-form-model-item>
                <a-form-model-item ref="name" label="连接名称" prop="connName">
                    <a-input v-model="form.connName"></a-input>
                </a-form-model-item>
                <a-form-model-item ref="name" label="连接地址" prop="connAddr">
                    <a-input :addon-before="jdbcAddr" v-model="form.connAddr"></a-input>
                </a-form-model-item>
                <a-form-model-item ref="name" label="用户名" prop="userName">
                    <a-input v-model="form.userName"></a-input>
                </a-form-model-item>
                <a-form-model-item ref="name" label="用户密码" prop="password">
                    <a-input type="password" v-model="form.password"></a-input>
                </a-form-model-item>
            </a-form-model>
        </a-modal>
    </a-spin>
</div>

</body>
<script>
    (function () {
        new Vue({
            el: "#mainDiv",
            data: {
                labelCol: {span: 4},
                wrapperCol: {span: 14},
                loading: false,
                query: {},
                dataList: [],
                columns: [
                    {
                        dataIndex: 'connName',
                        key: 'connName',
                        title: '连接名称',
                        width: "20%"
                    },
                    {
                        title: '连接地址',
                        dataIndex: 'connAddr',
                        key: 'connAddr',
                        width: "30%"
                    },
                    {
                        title: '用户名',
                        dataIndex: 'userName',
                        key: 'userName',
                        width: "20%"
                    },
                    {
                        title: '数据库类型',
                        dataIndex: 'dbType',
                        key: 'dbType',
                        width: "20%"
                    },
                    {
                        title: '操作',
                        dataIndex: 'dbType',
                        key: 'dbType',
                        width: "10%",
                        scopedSlots: {customRender: 'operation'},
                    }
                ],
                baseURL: "",
                tableQuery: {},
                dataList: [],
                form: {},
                showEditDialog: false,
                modalTitle: "",
                rules: {
                    dbType: [{required: true, message: '请选择数据库类型', trigger: 'change'}],
                    connName: [{required: true, message: '请输入连接名称', trigger: 'blur'}],
                    connAddr: [{required: true, message: '请输入数据库地址', trigger: 'blur'}],
                    userName: [{required: true, message: '请输入用户名', trigger: 'blur'}],
                    password: [{required: true, message: '请输入用户密码', trigger: 'blur'}],
                },
                jdbcAddr: "",
                jdbcMap: {
                    mysql: "jdbc:mysql://",
                    oracle: "jdbc:oracle:thin:@",
                    postgresql: "jdbc:postgresql://",
                    dm: "jdbc:dm://"
                }
            },
            methods: {
                searchConns: function () {
                    let me = this
                    this.loading = true
                    getReq(this.baseURL + "/conn/list", this.query).then(res => {
                        let result = res.data
                        me.loading = false
                        if (result.code == 0) {
                            me.dataList = result.data
                        }
                    })
                },
                toAddConn() {
                    this.modalTitle = '新增数据库'
                    this.showEditDialog = true
                    this.form = {}
                },
                toEdit(row) {
                    row.connAddr = row.connAddr.replace(this.jdbcMap[row.dbType], "")
                    this.jdbcAddr = this.jdbcMap[row.dbType]
                    this.form = row
                    this.modalTitle = '编辑数据库'
                    this.showEditDialog = true
                },
                saveConn() {
                    const me = this
                    this.$refs.ruleForm.validate(valid => {
                        if (valid) {
                            let data = {
                                ...this.form
                            }
                            data.connAddr = me.jdbcMap[data.dbType] + data.connAddr
                            jsonPost(this.baseURL + "/conn/save", data).then(res => {
                                if (res.data.code == 0) {
                                    antd.message.success("保存成功")
                                } else {
                                    antd.message.error("保存失败")
                                }
                                me.showEditDialog = false
                                me.form = {}
                                me.searchConns()
                            })
                        }
                    });
                },
                del(id) {
                    const me = this
                    this.$confirm({
                        title: '提示',
                        content: '请确认是否删除该记录？',
                        onOk() {
                            delReq(me.baseURL + "/conn/del/" + id).then(res => {
                                if (res.data.code == 0) {
                                    antd.message.success("删除成功")
                                } else {
                                    antd.message.error("删除失败")
                                }
                                me.searchConns()
                            })
                        },
                        onCancel() {
                        },
                    });

                },
                changeDbType(type) {
                    this.jdbcAddr = this.jdbcMap[type]
                }
            },
            mounted() {
                this.searchConns()
            },
            created() {
                this.baseURL = location.href.replace("/html/conns.html", "")
            }
        })
    })();
</script>
</html>
